<template>
  <div>
<div id="course-list">
	<div class="search-box">
		<div class="search-item">
			<div class="search-label">课程名:</div>
			<div class="search-content">
				<el-input v-model="courseName" placeholder="请输入内容" size="mini" ></el-input>
			</div>
		</div>
		<div class="search-item">
			<el-button type="primary" size="mini" icon="el-icon-search" @click="queryCourse">查询</el-button>
		</div>
    <div class="search-item">

          <div class="grid-content bg-purple" style="text-align: left;">
            <el-button type="primary" @click="openNewCourseDialog" icon="el-icon-plus" size="mini">创建课程</el-button>
            <el-button @click="deleteClassCourse" icon="el-icon-delete" size="mini">批量操作</el-button>
          </div>
    </div>

    <div class="search-item" style="text-align: left; margin-top: 15px; " v-show="status.isCheckBoxDisplay" id="classListBatchDelete">

         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
         <span style="font-size: 14px; cursor: pointer; margin-left: 20px; color: red" @click="batchDeleteClassCourse">批量删除</span>

    </div>

    </div>



	</div>

  <el-main>
    <el-row>
      <el-checkbox-group v-model="checkedClassCourseId" @change="handleCheckedCitiesChange">
        <el-col :span="6" v-for="course in courselist" :key="course.id" >
          <el-card :body-style="{ padding: '10px' }" style=" margin: 10px; position: relative;">
            <img :src="course.cover_url" class="image" style="height: 200px; cursor: pointer; "  @click="goCourseDetail(course.id);">
            <div style="padding: 14px 0">

              <div  @click="goCourseDetail(course.id);" style=" cursor: pointer; display:block; height: 30px;">
                <time class="time" style="font-size: 16px; color: #000;">{{ course.name }}</time>
              </div>
              <div class="bottom clearfix">
                <time class="time">{{ course.start_time }}-{{ course.end_time }}</time>
                <time class="time" style="float:right;" v-text="toPermissionLabel(course)"></time>
              </div>
              <el-checkbox :label="course.id" v-show="status.isCheckBoxDisplay" style="position: absolute; top: 15px; left:15px; z-index: 100;">&nbsp;</el-checkbox>
            </div>
          </el-card>
        </el-col>
      </el-checkbox-group>
    </el-row>

  </el-main>

	<el-dialog title="新增课程" :visible.sync="newCourseDialog">
		<el-form size="small" label-width="100px">
			<el-form-item label="课程名称:">
				<el-input placeholder="输入课程名称" v-model="d_course_name" size="mini"></el-input>
			</el-form-item>

      <el-form-item label="是否公开:">
          <el-radio-group v-model="is_open">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
      </el-form-item>


			<el-form-item label="封面介绍图:">
				<el-upload class="avatar-uploader" action="/file/upload" name = "fileData" :on-success="handleUploadSuccess"
					 :multiple="false" :show-file-list="false">
					<img v-if="d_cover_url" :src="d_cover_url" class="avatar">
  					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>

      <el-form-item label="详情介绍图:">
        <el-upload class="avatar-uploader" action="/file/upload" name = "fileData" :on-success="handleDetailUploadSuccess"
                   :multiple="false" :show-file-list="false">
          <img v-if="d_detail_url" :src="d_detail_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>


      <el-form-item label="主题" prop="subject_id">
        <el-select v-model="d_subject_id" placeholder="请选择">
          <el-option
            v-for="item in subject_options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="分组">
        <el-select v-model="selectedList" multiple placeholder="请选择">
          <el-option
            v-for="period in periodList"
            :key="period.id"
            :label="period.name"
            :value="period.id">
          </el-option>
        </el-select>
      </el-form-item>



			<el-form-item label="起始时间:">
				<el-date-picker v-model="d_start_time" format="yyyy-MM-dd" type="date"
					value-format="yyyy-MM-dd" placeholder="选择日期时间" size="mini">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="终止时间:">
				<el-date-picker v-model="d_end_time" format="yyyy-MM-dd" type="date"
					value-format="yyyy-MM-dd" placeholder="选择日期时间" size="mini">
				</el-date-picker>
			</el-form-item>
		</el-form>

		<span slot="footer" class="dialog-footer">
			<el-button @click="newCourseDialog = false" size="mini">取 消</el-button>
			<el-button type="primary" @click="addCourse" size="mini">确 定</el-button>
		</span>
	</el-dialog>


</div>
</template>

<script>
export default {
	name: "course-list",
	data(){
		return{
			courseName:'',
      courselist:[],
      subject_options:[],
      selectedList:[],
      periodList:[],
			newCourseDialog:false,
			//新增course
			d_start_time:'',
			d_end_time:'',
			d_course_name:'',
			d_cover_url:'',
      d_detail_url:'',
      d_subject_id:'',
      is_open:0,
      // 状态
      status:{
        isCheckBoxDisplay: false
      },
      checkAll:false,
      checkedClassCourseId:[],
      allClassCourseIds:[],
      isIndeterminate: true


		}
	},
	methods:{
		queryCourse(){
			this.postRequest("/course/queryCourses",{name:this.courseName,is_famous:0}).then(resp=>{
				this.courselist = resp.data.data.arrays;
        for(var c in this.courselist){
          this.allClassCourseIds.push(this.courselist[c].id);
        }
			})
		},
    loadPeriodList(){
      var _this = this;
      this.tableLoading = true;
      this.getRequest("/period/list?page=1&size=1000").then(resp=> {
        this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.periodList = data.data.arrays;
        }
      })
    },
    loadSubjects(){
      var _this = this;
      this.tableLoading = true;
      this.postRequest("/subject/list").then(resp=> {
        this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.subject_options = data.data.arrays;
        }
      })
    },


		handleUploadSuccess(result,file){
			this.d_cover_url = result.url;
		},
    handleDetailUploadSuccess(result,file){
      this.d_detail_url = result.url;
    },
		openNewCourseDialog(){
			this.newCourseDialog = true;
      this.d_cover_url = '';
      this.d_detail_url = '';
      this.d_subject_id = ''
      this.is_open = 0;
		},
		toPermissionLabel(row){
			if(row.permission == 0) return "待审核";
			if(row.permission == 1) return "审核通过";
			if(row.permission == -1) return "审核未通过"
		},
		addCourse(){
			if(!this.d_course_name) {
				this.$message({type: "error", message: "请输入课程名称"});
        		return;
			}
			if(!this.d_start_time) {
				this.$message({type: "error", message: "请选择课程开始时间"});
        		return;
			}
			if(!this.d_end_time){
				this.$message({type: "error", message: "请输入课程结束时间"});
        		return;
			}

      var periods_str = JSON.stringify(this.selectedList);

			var params = {name:this.d_course_name,subject_id:this.d_subject_id,periods_str:periods_str,start_time:this.d_start_time,end_time:this.d_end_time,cover_url:this.d_cover_url,detail_url:this.d_detail_url,is_open:this.is_open,is_famous:0}
			this.postRequest('/course/addCourse',params).then(resp=>{
				if(!resp){
					this.newCourseDialog = false;
				}
				else if(resp.data.status == 'success') {
					this.newCourseDialog = false;
					this.queryCourse();
				}
			}).finally(()=>{
				this.d_start_time = '';
			    this.d_end_time = '';
			    this.d_course_name = '';
			})
		},

    // 删除效果
    deleteClassCourse(){
      if(this.status.isCheckBoxDisplay){
        this.status.isCheckBoxDisplay = false;
      }else{
        this.status.isCheckBoxDisplay = true;
      }
    },
    /*
    * 全选
    * */
    handleCheckAllChange(val) {
      this.checkedClassCourseId = val ? this.allClassCourseIds : [];
      this.isIndeterminate = false;
    },
    /*
      单选
     */
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.allClassCourseIds.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allClassCourseIds.length;
    },
    /*
      批量删除 班课
     */
    batchDeleteClassCourse(){
      var that = this;
      var ids = "";
      var isSelectClassCourse = false;
      for(var i in this.checkedClassCourseId){
        ids += this.checkedClassCourseId[i] + ",";
        isSelectClassCourse = true;
      }
      if(!isSelectClassCourse){
        this.$message({
          message: "您没有选择任何班课",
          type:"warning"
        });
        return;
      }
      ids = ids.substr(0, ids.length-1);

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.postRequest("/course/delete/"+ids).then(resp=> {

          if (resp && resp.status == 200) {
            var data = resp.data;
            that.$message({type: data.status, message: data.msg});
            that.queryCourse();
          }
        }).catch(() => {
          that.$message({
            type:'danger',
            message:'删除失败!'
          })
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },      // 查看课程详情
    goCourseDetail:function(course_id) {
      this.$router.push({path:'/workspace',query:{
          course_id:course_id
        }});
    },


	},
	mounted(){
		this.queryCourse();
    this.loadSubjects();
    this.loadPeriodList();
	}

}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

